<template>
  <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
    <div class="content_form">
      <el-form ref="ruleForm" :model="dataForm" :rules="dataRules" label-width="100px">
        <el-form-item label="品牌名称" prop="brandName">
          <el-input v-model="dataForm.brandName" placeholder="请输入品牌名称" />
        </el-form-item>
        <el-form-item label="代理商" prop="generalAgencyId">
          <el-select v-model="dataForm.generalAgencyId" placeholder="请选择代理商">
            <el-option
              v-for="item in agencyList"
              :key="item.generalAgencyId"
              :label="item.generalAgencyName"
              :value="item.generalAgencyId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="dataForm.orderNum" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="Logo" prop="imageUrl">
          <ImageUpload :value="dataForm.imageUrl ? imgUrl + dataForm.imageUrl : dataForm.imageUrl" :uploadImgUrlType="'brand'" @input="inputEventListener" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio-group v-model="dataForm.isShow">
            <el-radio
              v-for="dict in dict.type.is_show"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" :rows="4" placeholder="请输入简介" v-model="dataForm.brandInfo"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addBrand, getBrand, updateBrand, agencySelectlist } from "@/api/product";

export default {
  name: "brandAdd",
  dicts: ['is_show'],
  data () {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      dataForm: {
        brandName: '',
        orderNum: '',
        generalAgencyId: '',
        brandInfo: '',
        brandId: undefined,
        imageUrl: '',
        isShow: '0'
      },
      // 表单校验
      dataRules: {
        brandName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
        ],
        generalAgencyId: [
          { required: true, message: '请选择代理商', trigger: 'change' },
        ],
        orderNum: [
          { required: true, message: '请输入排序', trigger: 'blur' },
        ],
        imageUrl: [
          { required: true, message: '请上传品牌logo', trigger: 'change' },
        ]
      },
      agencyList: []
    }
  },
  methods: {
    init (e) {
      this.reset();
      this.open = true;
      this.title = e ? "编辑品牌" : "添加品牌";
      this.dataForm.brandId = e || undefined
      this.agencySelectlistReq()
      if (e) return this.handleUpdate(e)
    },
    // 表单重置
    reset () {
      for (var key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key] = []
        } else {
          this.dataForm[key] = ''
        }
      }
      this.dataForm.isShow = '0'
      this.resetForm("ruleForm");
    },
    agencySelectlistReq () {
      agencySelectlist().then(res => {
        this.agencyList = res
        // const { code, data, msg } = res
        // if (code != 200) return this.$modal.msgError(msg);
        // console.log('data',data)
      })
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      getBrand(row).then(res => {
        const { code, data, msg } = res
        if (code != 200) return this.$modal.msgError(msg);
        this.dataForm = { ...data }
        this.dataForm.isShow = data.isShow + ''
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          const api = this.dataForm.brandId ? updateBrand(this.dataForm) : addBrand(this.dataForm)
          api.then(res => {
            const { code, msg } = res
            if (code !== 200) return this.$modal.msgError(msg);
            this.dataForm.brandId ? this.$modal.msgSuccess("修改成功") : this.$modal.msgSuccess("添加成功")
            this.open = false;
            this.$emit('eventUpdata')
          })
        }
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    inputEventListener (event) {
      this.dataForm.imageUrl = event
    }
  }
}
</script>
<style>
</style>
